<template>
  <div id="box">
    <div class="popup">
      <div>
        <div class="theHead">
          <span class="theTitle">时间选择</span>
          <x-icon @click="closeX" type="ios-close-empty" size="30"></x-icon>
        </div>
        <div class="theDateCon">
          <div class="dateSty" @click="getDate()">
            {{ startDateShow }}
          </div>
          至
          <div class="dateSty" @click="getDate(2)">
            {{ endDateShow }}
          </div>
        </div>
        <div @click="affirm" class="sureBtn">确认</div>
      </div>
    </div>
    <van-popup get-container="body"  v-model="dataChooseFlag" position="bottom">
      <van-datetime-picker v-model="currentDate" type="date" title="选择年月日" :min-date="minDate" :max-date="maxDate"
        @confirm="sureDate" @cancel="dataChooseFlag = false" />
    </van-popup>
  </div>
</template>
<script>
import { dateFormat, getTime, getNDateBefore, getYearOrMonth } from '@/utils/dateUtil'
import { mapGetters } from 'vuex'
export default {
  components: {},
  props: {
    startDate: {},
    endDate: {}
  },
  data() {
    return {
      dataChooseFlag: false,
      // 时间选择值
      currentDate: '',
      startDateShow: '',
      endDateShow: '',
      // 设置时间选择可选取间
      minDate: new Date(2017, 0, 1),
      maxDate: new Date(2021, 11, 31),
      dataIndex: 1
    }
  },
  mounted() {
    this.minDate = new Date(`2021-01-01`)
    this.maxDate = new Date(getNDateBefore(1))
  },
  computed: {
    ...mapGetters(['detailTime'])
  },
  watch: {
    detailTime: {
      handler(newValue, oldValue) {
        this.startDateShow = this.detailTime.startData
        this.endDateShow = this.detailTime.endData
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    // 打开时间选择框
    getDate(flag = 1) {
      this.dataIndex = flag
      if (flag === 1) {
        this.minDate = new Date(`2021-01-01`)
        this.maxDate = new Date(getNDateBefore(1))
      } else {
        this.minDate = new Date(this.startDateShow)
      }
      this.dataChooseFlag = true
    },
    closeX() {
      this.$emit('closeX', false)
    },
    // 时间选择按钮
    sureDate() {
      this.dataIndex === 1
        ? this.startDateShow = dateFormat(this.currentDate)
        : this.endDateShow = dateFormat(this.currentDate)
      this.dataChooseFlag = false
    },
    // 时间选择确认按钮
    affirm() {
      const start = getTime('2020-10-31')
      const end = getTime('2020-12-31')
      const startNow = getTime(this.startDateShow)
      const endNow = getTime(this.endDateShow)
      if (!this.startDateShow || !this.endDateShow) {
        this.$alertShow('请选择开始时间或结束时间')
      } else if (endNow < startNow) {
        this.$alertShow('开始时间不能大于结束时间')
      } else if (this.startDateShow.substring(0, 4) !== this.endDateShow.substring(0, 4)) {
        this.$alertShow('不可跨年查询')
      } else if ((startNow >= start && startNow <= end) || (endNow >= start && endNow <= end)) {
        this.$alertShow('该时间范围暂无数据！')
      } else {
        this.$store.commit('SETDETAILTIME', { startData: this.startDateShow, endData: this.endDateShow })
        this.$store.commit('SETSHOW', false)
      }
    }
  }
}
</script>
<style scoped lang='less'>
#box {
  font-size: 0.28rem;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
  color: #333333;
  font-weight: 400;

  .theHead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f6f6f6;

    .theTitle {
      color: #565656;
      font-size: 0.28rem;
      padding: 0.2rem;
    }
  }

  .theDateCon {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 0.3rem;

    .dateSty {
      width: 2.5rem;
      padding: 0.15rem 0;
      background-color: #f3f3f3;
      text-align: center;
      border-radius: 0.08rem;
    }
  }

  .sureBtn {
    width: 95%;
    text-align: center;
    color: #ffffff;
    background: #4570a9;
    margin: 0.6rem auto;
    padding: 0.15rem 0;
    border-radius: 0.08rem;
  }

  .van-overlay {
    z-index: 99999999 !important;
  }

  .van-popup--bottom {
    z-index: 99999999 !important;
  }
}
</style>
